<template>
    <div class="detail_nav">
        <ul class="menu_list">
            <li>
                <a @click="scrollTo('personalInfo')" :class="{'active': activeModule === 'personalInfo'}" href="javascript:void(0);">{{$t('pageTitle.userInformation')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>
            </li>
            <li v-if="$route.query.currentStatus==='3'">
                <a @click="scrollTo('orderDetails')" :class="{'active': activeModule === 'orderDetails'}" href="javascript:void(0);">{{$t('common.orderDetails')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>
            </li>
            <li>
                <a @click="scrollTo('telRecord')" :class="{'active': activeModule === 'telRecord'}" href="javascript:void(0);">{{$t('salesManage.salesRecord')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>
            </li>
            <li>
                <a @click="scrollTo('telIntergity')" :class="{'active': activeModule === 'telIntergity'}" href="javascript:void(0);">{{$t('salesManage.infoeIntegrity')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>
            </li>
            <li>
                <a @click="scrollTo('quotaInformation')" :class="{'active': activeModule === 'quotaInformation'}" href="javascript:void(0);">{{$t('salesManage.quotaInformation')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'detailMenu',
    props: {
        activeMenu: {
            required: true,
            type: String
        }
    },
    watch: {
        activeMenu (newVal, oldVal) {
            this.activeModule = newVal;
        }
    },
    data() {
        return {
            activeModule: 'personalInfo'
        };
    },
    methods: {
        scrollTo(module) {
            this.activeModule = module;
            this.$emit('click', module);
        }
    }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/function";
.detail_nav{
    margin: 0 0 8px;
    background-color: #fff;
    display: inline;
}
.menu_list{
    li{
        display: inline-block;
        a{
            display: block;
            padding: 0 20px;
            line-height: 44px;
            color: $colorText;
            height: 44px;
            position: relative;
            &.active{
                background-color: $primary;
                color: #fff;
                .detail_menu_icon{
                    display: block;
                }
            }
            .detail_menu_icon{
                display: none;
                position: absolute;
                bottom: -7px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 20px;
                color: #f4f5f6;
            }
        }
    }
}
</style>
